<template>
  <div class="top">
    <div class="box">
      <mt-field label="文章链接" placeholder="请输入链接" v-model="url" style="width: 85%;float: left;"></mt-field>
      <img class="article-img" src="../../assets/pictures/问号.png" @click="question" />
    </div>
    <mt-radio title="选择文章类型" v-model="type" :options="['时政新闻', '娱乐新闻', '体育焦点', '财经焦点', '科技焦点']"></mt-radio>
    <mt-field label="自定义类型" placeholder="请输入文章类型" v-model="type" class="field"></mt-field>
    <mt-button type="primary" size="large" @click.native="handleClick">上传</mt-button>
    <mt-popup v-model="popupVisible" popup-transition="popup-fade" class="popup">
      <div class="popup-content">目前只支持微信公众号文章，请复制正确的微信公众号文章链接</div>
    </mt-popup>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
import $ from 'jquery';
export default {
  name: 'upload',
  data() {
    return {
      openid: '',
      url: '',
      popupVisible: false,
      type: '',
      articleId: ''
    };
  },
  methods: {
    question: function() {
      this.popupVisible = true;
    },
    handleClick: function() {
      console.log(this.url + this.type);
      var flag = true;
      if (this.url.length != 49) {
        let toastInstanse = Toast({
          message: '请输入正确的文章链接', //弹窗内容
          position: 'middle', //弹窗位置
          duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
        });
        flag = false;
      }
      if (this.url.substring(0, 24) != 'https://mp.weixin.qq.com') {
        let toastInstanse1 = Toast({
          message: '请输入正确的文章链接', //弹窗内容
          position: 'middle', //弹窗位置
          duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
        });
        flag = false;
      }
      if (this.type == null || this.type == '') {
        let toastInstanse1 = Toast({
          message: '请选择正确的文章类型', //弹窗内容
          position: 'middle', //弹窗位置
          duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
        });
        flag = false;
      }
      if (flag) {
        var that = this;
        $.ajax({
          url: 'https://yokapp.mynatapp.cc/article/upload',
          type: 'GET',
          async: true,
          data: { openid: that.openid, url: that.url, type: that.type },
          success: function(data) {
            if (data == null || data == '') {
              let toastInstanse3 = Toast({
                message: '上传失败', //弹窗内容
                position: 'middle', //弹窗位置
                duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
              });
            } else {
              let toastInstanse2 = Toast({
                message: '上传成功', //弹窗内容
                position: 'middle', //弹窗位置
                duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
              });
              console.log(data);
              that.articleId = data.toString();
              console.log(that.articleId);
              that.getArticle(that.articleId);
            }
          },
          error: function(xhr, textStatus) {
            console.log('getArticle失败' + textStatus);
            let toastInstanse1 = Toast({
              message: '上传失败', //弹窗内容
              position: 'middle', //弹窗位置
              duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
            });
          }
        });
      }
    },
    getArticle: function(aid) {
      this.$axios
        .get('article/getArticle', {
          params: { articleId: aid, userArticleId: '', openid: this.openid }
        })
        .then(res => {
          // console.log(res.data);
          let toastInstanse2 = Toast({
            message: '上传成功', //弹窗内容
            position: 'middle', //弹窗位置
            duration: 2000 //弹窗时间毫秒,如果值为-1，则不会消失
          });
          this.$router.push({
            path: '/articleDetail',
            query: { articleId: res.data.article.id, userArticleId: res.data.userArticleId, article: res.data.article }
          });
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this.openid = localStorage.getItem('openId');
  }
};
</script>

<style scoped>
.field {
  margin-top: 10px;
  margin-bottom: 20px;
}
.top {
  margin-bottom: 55px;
}
.box {
  margin-bottom: 20px;
}
.article-img {
  width: 25px;
  margin-top: 9px;
}
.popup {
  left: 290px;
  top: 90px;
  width: 150px;
  border-radius: 15px;
}

.popup-content {
  padding: 10px;
}
</style>
